<script setup lang="ts">
import { ref, onMounted } from "vue";
import type { Logistics, Location } from "@/types/order";
import { getLogisticsApi } from "@/services/consult";
import { useRoute, useRouter } from "vue-router";
import AMapLoader from "@amap/amap-jsapi-loader";
import startImg from "../../assets/start.png";
import endImg from "../../assets/end.png";
import carImg from "../../assets/car.png";
const route = useRoute();
const logistics = ref<Logistics>();

window._AMapSecurityConfig = {
  securityJsCode: "96511961adcea19a5d2421c16c42c08f",
};

const initMap = () => {
  AMapLoader.load({
    key: "15725800856133cc50962de369fbc49a", //申请好的Web端开发者key，调用 load 时必填
    version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
  })
    .then((AMap) => {
      //JS API 加载完成后获取AMap对象
      const map = new AMap.Map("map", {
        mapStyle: "amap://styles/fresh",
        zoom: 12,
      });
      //引入和创建驾车规划插件

      AMap.plugin("AMap.Driving", function () {
        const driving = new AMap.Driving({
          map: map,
          showTraffic: false,
          hideMarkers: true,
        });
        if (
          logistics.value?.logisticsInfo &&
          logistics.value.logisticsInfo.length >= 2
        ) {
          const list = [...logistics.value.logisticsInfo];
          // 创建标记函数
          const getMarker = (
            point: Location,
            image: string,
            width = 25,
            height = 30
          ) => {
            const icon = new AMap.Icon({
              size: new AMap.Size(width, height),
              image,
              imageSize: new AMap.Size(width, height),
            });
            const marker = new AMap.Marker({
              position: [point?.longitude, point?.latitude],
              icon: icon,
              offset: new AMap.Pixel(-width / 2, -height),
            });
            return marker;
          };
          // 起点
          const start = list.shift();
          const startMarker = getMarker(start!, startImg);
          map.add(startMarker);
          // 终点
          const end = list.pop();
          const endMarker = getMarker(end!, endImg);
          map.add(endMarker);
          console.log(start, end);

          driving.search(
            [start?.longitude, start?.latitude],
            [end?.longitude, end?.latitude],
            { waypoints: list.map((item) => [item.longitude, item.latitude]) },
            () => {
              // 规划完毕
              // 运输位置
              const curr = logistics.value?.currentLocationInfo;
              const currMarker = getMarker(curr!, carImg, 33, 20);
              map.add(currMarker);
              // 3s后定位当中间进行缩放
              setTimeout(() => {
                map.setFitView([currMarker]);
                map.setZoom(10);
              }, 3000);
            }
          );
        }
      });
    })
    .catch((e) => {
      console.error(e); //加载错误提示
    });
};
onMounted(async () => {
  const res = await getLogisticsApi(route.params.id as string);
  console.log(res);
  logistics.value = res.data;
  initMap();
});
</script>

<template>
  <div class="order-map-page">
    <cp-nav-bar ref="navbar" title="运输中"></cp-nav-bar>
    <div id="map">
      <div class="card">
        <p>
          {{ logistics?.statusValue }}————预计{{ logistics?.estimatedTime }}
        </p>
        <p>{{ logistics?.name }}&emsp; {{ logistics?.awbNo }}</p>
      </div>
    </div>
    <div class="setps">
      <p>物流详情</p>
      <van-steps direction="vertical" :active="0">
        <van-step v-for="item in logistics?.list" :key="item.id">
          <p>{{ item.statusValue }}</p>
          <p>{{ item.content }}</p>
          <p>{{ item.createTime }}</p>
        </van-step>
      </van-steps>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.order-map-page {
  height: 100vh;
  overflow-y: scroll;
  #map {
    background-color: #eeefee;
    height: 500px;
    position: relative;
    width: 100%;
  }
  .setps {
    padding: 10px;
    font-size: 16px;
  }
  .card {
    position: absolute;
    bottom: 10px;
    width: 90%;
    z-index: 200;
    padding: 10px;
    background-color: #fff;
    margin-left: 20px;
    p:nth-child(2) {
      color: var(--cp-text3);
      font-size: 14px;
    }
    p:nth-child(1) {
      font-size: 16px;
    }
  }
}
</style>
